import React, { Component } from 'react';
import { pingLun, Terchangs } from "../../../redux/action/yin";
import { connect } from "react-redux"
import "./prodetail.scss";
import { Tabs } from 'antd';
import { Pagination, Button, message } from 'antd';
import { FenteZ, addpinglun } from "../../../api/api"
const { TabPane } = Tabs;


class Prodetail extends Component {
    state = {
        pageNum: 1,//第几页
        pageSize: 10,//每页多少条,
        indexs: 0,
        discussDesc: "",
    }
    componentDidMount() {
        this.initpinglin()
        this.initpinglunde()
    }
    //获取评论的数据
    initpinglin() {
        const { id } = this.props.location.state
        this.props.Terchandd(id)//获取指导老师的数据
    }
    //评论
    initpinglunde = async () => {
        const { pageNum, pageSize } = this.state
        const { id } = this.props.location.state
        await this.props.initping({ id, pageNum, pageSize })//获取评论数据

    }
    callback = (key) => {
        console.log(key);
    }
    callbacks = async (key) => {
        if (key === 2) {
            const { pageNum, pageSize } = this.state
            const { id } = this.props.location.state
            let res = await FenteZ({ id, pageNum, pageSize })
            console.log(res);
        }
        console.log(key);
    }

    fopter = (e) => {
        this.setState({ discussDesc: e.target.value })


    }
    addpingluns = async () => {
        const { discussDesc } = this.state

        if (discussDesc === "") {
            message.error("内容不能为空")
        } else {
            const { id } = this.props.location.state
            let res = await addpinglun({ discussDesc, proId: id })
            console.log(res);
            await this.initpinglunde()
            await this.setState({ discussDesc: '' })
        }



    }
    onChange = (page, pageSize) => {
        this.setState({
            pageNum: page,
            pageSize,
        },()=>{
            const { pageNum, pageSize } = this.state
            const { id } = this.props.location.state
            this.props.initping({ id, pageNum, pageSize })//获取评论数据

        })

    }
    render() {
        const { pingLunx, totals, terLosi, ItemImg, SHixun, imassde } = this.props.Yin//从仓库去除请求到的数据;
        const { indexs, discussDesc } = this.state
        return (
            <div className="project_width center_width">
                <div className="project_left">
                    <div className="project_detail">
                        <div className="detail_title"></div>
                        <div className="detail_num">
                            <span > 人学过</span>
                            <span> 人关注</span>
                            <span>作者：</span>
                        </div>
                        <div className="detail_text"></div>
                        <div className="tags"></div>
                    </div>
                    <div className="comment_tab">
                        <div className="table">
                            <Tabs defaultActiveKey="1" size="large" onChange={this.callback}>
                                <TabPane tab="实训大纲" key="1">
                                    <ul className="uis">
                                        {
                                            SHixun && SHixun.map((item, ind) => {
                                                return <li className={indexs === ind ? "action" : ''} key={ind} onClick={() => {
                                                    this.setState({ indexs: ind })
                                                }}>{item.label}</li>
                                            })
                                        }
                                    </ul>
                                    <p>暂无数据</p>
                                </TabPane>
                                <TabPane tab="实训任务" key="2">
                                    <div className="component_content">
                                        <div className="topcpm">
                                            <ul>
                                                <li>任务名称</li>
                                                <li>考核标准</li>
                                                <li>保薪技能</li>
                                                <li>提薪技能</li>
                                            </ul>
                                        </div>
                                        <div className="buttomcpm">
                                            <span>暂无数据</span>
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane tab="项目资源" key="3">
                                    <ul className="uidjk">
                                        <li>资源名称</li>
                                        <li>资源类型</li>
                                        <li>提交文件</li>
                                        <li>描述</li>
                                        <li>教室</li>
                                        <li>学生</li>
                                    </ul>
                                </TabPane>
                                <TabPane tab="实训环境" key="4">
                                </TabPane>
                                <TabPane tab="前置项目" key="5">
                                    <Pagination className="fenye" defaultCurrent={1} total={10} />
                                </TabPane>
                            </Tabs>
                        </div>
                    </div>
                    <div className="comment_tabs">
                        <div className="addfg">
                            <Tabs defaultActiveKey="1" onChange={this.callbacks}>
                                <TabPane tab={`实训评论(${totals})`} key="1">
                                    <div className="comm_ping">
                                        <div className="logik">
                                            <img src={imassde.avatar} alt=" " />
                                            <textarea className="text" placeholder="来说两句吧" name="texts" id="" cols="100" rows="5" value={discussDesc} onChange={(e) => {
                                                this.fopter(e)
                                            }}>
                                            </textarea>
                                            <Button className="but" onClick={() => {
                                                this.addpingluns()
                                            }}>发表评论</Button>
                                        </div>
                                        <div className="pingbutton">
                                            {
                                                pingLunx && pingLunx.map((item, ind) => {
                                                    return <div className="polmn" key={ind}>
                                                        <img src={item.userPictureUrl} alt="" />
                                                        <div>
                                                            <p>{item.disReplyid}</p>
                                                            <p>{item.disReplycontent}</p>
                                                            <p>{item.replyTime}</p>
                                                        </div>
                                                    </div>
                                                })
                                            }
                                        </div>
                                    </div>
                                </TabPane>
                                <TabPane tab="实训问答（）" key="2">
                                    <Pagination className="fenye" defaultCurrent={1} total={10} />
                                </TabPane>
                            </Tabs>
                        </div>
                        <div className="plfy">
                            <Pagination defaultCurrent={1} total={totals} onChange={this.onChange} />
                        </div>
                    </div>
                </div>
                <div className="project_right">
                    <div className="right_content">
                        <div className="right_img">
                            <img src={ItemImg.pictureUrl} alt="" />
                        </div>
                        <div className="right_task">
                            <div className="task_ el-row">
                                <div className="task_left el-col el-col-6">
                                </div>
                                <div className="task_right el-col el-col-18"></div>
                            </div>
                        </div>
                    </div>
                    <div className="teacher_info">
                        <div className="n_d_title el-row is-align-middle el-row--flex">
                            <div className="el-col el-col-20" >
                                <span className="icon"></span>
                            </div>
                            <div className="el-badge item">指导老师
                            </div>
                        </div>
                        <div className="s_info">
                            <div className="s_avatar">
                                <img src={terLosi.authorPictureUrl} alt="" />
                            </div>
                            <div className="s_name">{terLosi.authorName}</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
export default connect(
    (state) => {
        return {
            ...state,
        };
    },
    (dispatch) => {
        return {
            initping(params) {
                dispatch(pingLun(params))
            },
            Terchandd(id) {
                dispatch(Terchangs(id))
            }
        };
    }
)(Prodetail);